<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒数计时器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
        }
        
        .timer-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
            min-width: 400px;
        }
        
        .timer-display {
            font-size: 4rem;
            font-weight: bold;
            color: #333;
            margin: 30px 0;
            font-family: 'Courier New', monospace;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .input-group {
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .input-group input {
            width: 100px;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            text-align: center;
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 80px;
        }
        
        .btn-start {
            background: #10b981;
            color: white;
        }
        
        .btn-start:hover {
            background: #059669;
            transform: translateY(-2px);
        }
        
        .btn-pause {
            background: #f59e0b;
            color: white;
        }
        
        .btn-pause:hover {
            background: #d97706;
            transform: translateY(-2px);
        }
        
        .btn-reset {
            background: #ef4444;
            color: white;
        }
        
        .btn-reset:hover {
            background: #dc2626;
            transform: translateY(-2px);
        }
        
        .timer-finished {
            animation: pulse 1s infinite;
            color: #ef4444;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #ef4444;
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateX(400px);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <h1 class="text-3xl font-bold text-gray-800 mb-8">
            <i class="fas fa-clock mr-2"></i>倒数计时器
        </h1>
        
        <div class="timer-display" id="timerDisplay">1:00</div>
        
        <div class="input-group">
            <label for="timeInput" class="text-lg font-semibold text-gray-700">
                设置时间（秒）：
            </label>
            <input type="number" id="timeInput" value="60" min="1" max="3600">
            <button class="btn btn-reset" onclick="resetTimer()">
                <i class="fas fa-redo mr-1"></i>重置
            </button>
        </div>
        
        <div class="button-group">
            <button class="btn btn-start" id="startBtn" onclick="toggleTimer()">
                <i class="fas fa-play mr-1"></i>开始
            </button>
        </div>
    </div>
    
    <div class="notification" id="notification">
        <i class="fas fa-bell mr-2"></i>倒计时结束！
    </div>

    <script>
        let totalSeconds = 60;
        let remainingSeconds = 60;
        let isRunning = false;
        let timer = null;

        const timerDisplay = document.getElementById('timerDisplay');
        const timeInput = document.getElementById('timeInput');
        const startBtn = document.getElementById('startBtn');
        const notification = document.getElementById('notification');

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${minutes}:${secs.toString().padStart(2, '0')}`;
        }

        function updateDisplay() {
            timerDisplay.textContent = formatTime(remainingSeconds);
            
            if (remainingSeconds <= 10 && remainingSeconds > 0) {
                timerDisplay.classList.add('timer-finished');
            } else {
                timerDisplay.classList.remove('timer-finished');
            }
        }

        function showNotification() {
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        function startTimer() {
            if (timer) clearInterval(timer);
            
            timer = setInterval(() => {
                if (remainingSeconds > 0) {
                    remainingSeconds--;
                    updateDisplay();
                } else {
                    stopTimer();
                    showNotification();
                    // 播放提示音（使用Web Audio API创建简单的提示音）
                    playBeepSound();
                }
            }, 1000);
        }

        function stopTimer() {
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            isRunning = false;
            startBtn.innerHTML = '<i class="fas fa-play mr-1"></i>开始';
            startBtn.className = 'btn btn-start';
        }

        function playBeepSound() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.frequency.value = 800;
                oscillator.type = 'sine';
                
                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
                
                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (error) {
                console.log('无法播放提示音:', error);
            }
        }

        function toggleTimer() {
            if (isRunning) {
                // 暂停
                stopTimer();
            } else {
                // 开始
                if (remainingSeconds === 0) {
                    remainingSeconds = totalSeconds;
                }
                isRunning = true;
                startBtn.innerHTML = '<i class="fas fa-pause mr-1"></i>暂停';
                startBtn.className = 'btn btn-pause';
                startTimer();
            }
        }

        function resetTimer() {
            stopTimer();
            totalSeconds = parseInt(timeInput.value) || 60;
            remainingSeconds = totalSeconds;
            updateDisplay();
        }

        // 监听输入框变化
        timeInput.addEventListener('input', function() {
            if (!isRunning) {
                totalSeconds = parseInt(this.value) || 60;
                remainingSeconds = totalSeconds;
                updateDisplay();
            }
        });

        // 键盘快捷键支持
        document.addEventListener('keydown', function(event) {
            if (event.code === 'Space') {
                event.preventDefault();
                toggleTimer();
            } else if (event.code === 'KeyR') {
                event.preventDefault();
                resetTimer();
            }
        });

        // 初始化显示
        updateDisplay();
    </script>
</body>
</html>
